<template>
  <div class="client-management">
    <div class="page-header">
      <h1 class="page-title">客户管理</h1>
      <div class="header-actions">
        <el-button type="primary" @click="showAddDialog = true">
          <i class="fas fa-plus mr-2"></i>添加客户
        </el-button>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="search-section">
      <div class="search-row">
        <el-input
          v-model="searchQuery"
          placeholder="搜索客户姓名、手机号或邮箱"
          class="search-input"
          clearable
        >
          <template #prefix>
            <i class="fas fa-search"></i>
          </template>
        </el-input>
        <el-select v-model="statusFilter" placeholder="客户状态" clearable class="status-filter">
          <el-option label="全部" value=""></el-option>
          <el-option label="活跃" value="active"></el-option>
          <el-option label="非活跃" value="inactive"></el-option>
          <el-option label="已禁用" value="disabled"></el-option>
        </el-select>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
    </div>

    <!-- 客户统计 -->
    <div class="stats-section">
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-users text-blue-500"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.totalClients }}</div>
          <div class="stat-label">总客户数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-user-check text-green-500"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.activeClients }}</div>
          <div class="stat-label">活跃客户</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-user-plus text-orange-500"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.newClients }}</div>
          <div class="stat-label">本月新增</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-gavel text-purple-500"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.clientsWithCases }}</div>
          <div class="stat-label">有案件客户</div>
        </div>
      </div>
    </div>

    <!-- 客户列表 -->
    <div class="table-section">
      <el-table :data="filteredClients" v-loading="loading" style="width: 100%">
        <el-table-column prop="id" label="客户ID" width="100"></el-table-column>
        <el-table-column prop="name" label="客户姓名" width="120"></el-table-column>
        <el-table-column prop="phone" label="联系电话" width="140"></el-table-column>
        <el-table-column prop="email" label="邮箱地址" min-width="180"></el-table-column>
        <el-table-column prop="caseCount" label="案件数量" width="100" align="center"></el-table-column>
        <el-table-column prop="totalAmount" label="总金额" width="120" align="center">
          <template #default="{ row }">
            <span class="text-green-600 font-semibold">¥{{ row.totalAmount.toLocaleString() }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="registerDate" label="注册时间" width="120"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="{ row }">
            <el-button size="small" type="primary" @click="viewClient(row)">
              <i class="fas fa-eye mr-1"></i>详情
            </el-button>
            <el-button size="small" type="warning" @click="editClient(row)">
              <i class="fas fa-edit mr-1"></i>编辑
            </el-button>
            <el-button 
              size="small" 
              :type="row.status === 'disabled' ? 'success' : 'danger'"
              @click="toggleClientStatus(row)"
            >
              {{ row.status === 'disabled' ? '启用' : '禁用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-section">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalClients"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 添加客户对话框 -->
    <el-dialog v-model="showAddDialog" title="添加客户" width="600px">
      <el-form :model="newClient" :rules="clientRules" ref="clientForm" label-width="100px">
        <el-form-item label="客户姓名" prop="name">
          <el-input v-model="newClient.name" placeholder="请输入客户姓名"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="newClient.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="邮箱地址" prop="email">
          <el-input v-model="newClient.email" placeholder="请输入邮箱地址"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="newClient.idCard" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="newClient.address" placeholder="请输入详细地址"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button type="primary" @click="handleAddClient">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'

export default {
  name: 'ClientManagement',
  setup() {
    const loading = ref(false)
    const searchQuery = ref('')
    const statusFilter = ref('')
    const currentPage = ref(1)
    const pageSize = ref(20)
    const showAddDialog = ref(false)
    
    // 交通事故当事人统计
    const stats = reactive({
      totalClients: 2156,   // 交通事故当事人总数
      activeClients: 1876,  // 活跃交通事故当事人
      newClients: 156,      // 本月新增交通事故当事人
      clientsWithCases: 1598 // 有活跃案件的当事人
    })
    
    // 交通事故当事人列表
    const clients = ref([
      {
        id: 'TC001',
        name: '张先生',
        phone: '138****8976',
        email: 'zhang.traffic@example.com',
        caseCount: 1,
        totalAmount: 280000, // 交通事故赔偿金额
        status: 'active',
        registerDate: '2024-01-15',
        accidentType: '机动车追尾',
        injuryLevel: '九级伤残'
      },
      {
        id: 'TC002', 
        name: '李女士',
        phone: '139****5432',
        email: 'li.victim@example.com',
        caseCount: 1,
        totalAmount: 156000,
        status: 'active',
        registerDate: '2024-02-01',
        accidentType: '非机动车事故',
        injuryLevel: '十级伤残'
      },
      {
        id: 'TC003',
        name: '王先生',
        phone: '137****6789',
        email: 'wang.case@example.com',
        caseCount: 2,
        totalAmount: 450000,
        status: 'active',
        registerDate: '2024-01-20',
        accidentType: '重大交通事故',
        injuryLevel: '八级伤残'
      },
      {
        id: 'TC004',
        name: '陈女士',
        phone: '136****3456',
        email: 'chen.traffic@example.com',
        caseCount: 1,
        totalAmount: 89000,
        status: 'active',
        registerDate: '2024-02-10',
        accidentType: '轻微交通事故',
        injuryLevel: '轻微伤'
      },
      {
        id: 'TC005',
        name: '刘先生',
        phone: '135****7890',
        email: 'liu.accident@example.com',
        caseCount: 0,
        totalAmount: 0,
        status: 'inactive',
        registerDate: '2024-02-15',
        accidentType: '咨询阶段',
        injuryLevel: '待鉴定'
      }
    ])
    
    const newClient = reactive({
      name: '',
      phone: '',
      email: '',
      idCard: '',
      address: ''
    })
    
    const clientRules = {
      name: [{ required: true, message: '请输入客户姓名', trigger: 'blur' }],
      phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
      email: [{ required: true, message: '请输入邮箱地址', trigger: 'blur' }]
    }
    
    const filteredClients = computed(() => {
      return clients.value.filter(client => {
        const matchesSearch = !searchQuery.value || 
          client.name.includes(searchQuery.value) ||
          client.phone.includes(searchQuery.value) ||
          client.email.includes(searchQuery.value)
        
        const matchesStatus = !statusFilter.value || client.status === statusFilter.value
        
        return matchesSearch && matchesStatus
      })
    })
    
    const totalClients = computed(() => filteredClients.value.length)
    
    const getStatusType = (status) => {
      const types = {
        'active': 'success',
        'inactive': 'warning',
        'disabled': 'danger'
      }
      return types[status] || 'info'
    }
    
    const getStatusText = (status) => {
      const texts = {
        'active': '活跃',
        'inactive': '非活跃',
        'disabled': '已禁用'
      }
      return texts[status] || '未知'
    }
    
    const handleSearch = () => {
      currentPage.value = 1
    }
    
    const handleSizeChange = (size) => {
      pageSize.value = size
      currentPage.value = 1
    }
    
    const handleCurrentChange = (page) => {
      currentPage.value = page
    }
    
    const viewClient = (client) => {
      alert(`查看客户详情: ${client.name}`)
    }
    
    const editClient = (client) => {
      alert(`编辑客户: ${client.name}`)
    }
    
    const toggleClientStatus = (client) => {
      const newStatus = client.status === 'disabled' ? 'active' : 'disabled'
      client.status = newStatus
      alert(`客户状态已更新为: ${getStatusText(newStatus)}`)
    }
    
    const handleAddClient = () => {
      alert('添加客户功能开发中...')
      showAddDialog.value = false
    }
    
    return {
      loading,
      searchQuery,
      statusFilter,
      currentPage,
      pageSize,
      showAddDialog,
      stats,
      clients,
      newClient,
      clientRules,
      filteredClients,
      totalClients,
      getStatusType,
      getStatusText,
      handleSearch,
      handleSizeChange,
      handleCurrentChange,
      viewClient,
      editClient,
      toggleClientStatus,
      handleAddClient
    }
  }
}
</script>

<style scoped>
.client-management {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

.search-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

.search-input {
  flex: 1;
  max-width: 400px;
}

.status-filter {
  width: 150px;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #1f2937;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
}

.table-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-section {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style> 